<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :pathUrl="pathUrl"
      :btnText="btnText"
      :isShowBtn="isShowBtn"
      :isDisabled="isDisabled"
    ></topTitle>
    <div class="mainCon">
      <!-- <div class="commomPaddingComtainer"> -->
      <el-row
        class="toolbar searchInputWidth"
        style="padding-bottom: 0; margin-bottom: 0"
      >
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item
              label="监管区域"
              class="row-padding-bottom"
              v-if="
                userType != 'PROJECT_ADMINISTRATOR' ||
                userType == 'LABOR_ADMINISTRATOR'
              "
            >
              <el-cascader
                ref="regAreas"
                v-model="areaId"
                :options="areaList"
                :props="{ checkStrictly: true }"
                @change="handleChange"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="缴纳方式" class="row-padding-bottom">
              <el-select
                v-model="filterField.method"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) of methodList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="缴纳形式" class="row-padding-bottom">
                <el-select
                  v-model="filterField.payMethod"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) of payList"
                    :key="index"
                    :label="item.text"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) of statusList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="是否动用" class="row-padding-bottom">
                <el-select
                  v-model="filterField.isExpenditure"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) of isExpenditureData"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="缴纳单位" class="row-padding-bottom name">
                <el-input
                  placeholder="请输入内容"
                  clearable
                  v-model="filterField.companyName"
                  @blur="filterField.companyName = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="缴纳项目" class="row-padding-bottom name">
                <el-input
                  placeholder="请输入内容"
                  clearable
                  v-model="filterField.projectName"
                  @blur="filterField.projectName = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="缴纳时间" class="row-padding-bottom">
                <!-- <el-date-picker v-model="time" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker> -->
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目状态">
                <el-select
                  placeholder="请选择"
                  clearable
                  v-model="filterField.projectStatus"
                >
                  <el-option
                    v-for="item in statusOptions.filter(
                      (item) => item.name !== '已完工'
                    )"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item>
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button> -->
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <exportBtn
              v-if="!isShowAdd"
              :dataLen="tableList.length"
              :filterField="filterField"
              :api="exportApi"
              :responseType="responseType"
            ></exportBtn>
            <!-- <el-button v-if="isShowAdd"  :disabled="isDisabled" class="commonBut saveBtn funComBut bzjAddJc" icon="icon iconfont icontianjia" @click="addCashDeposit" v-show="isShowAdd">
                                <span class="opetareText">添加</span>
                            </el-button> -->
          </el-form-item>
        </el-form>
      </el-row>

      <el-row
        class="amountView"
        v-if="
          userType != 'PROJECT_ADMINISTRATOR' ||
          userType == 'LABOR_ADMINISTRATOR'
        "
      >
        <el-row class="areaName">
          {{ areaName }}
          <span class="explain"
            >（本统计仅根据区域查询条件进行变更显示，数据更新时间每天凌晨0:00更新）</span
          >
        </el-row>
        <div class="amountEach clearfix">
          <div class="amountTitle"><span></span>资金存入</div>
          <!-- <ul class="clearfix">
                            <li class="eachTitle">
                                缴纳：
                                <span class="eachNum fontColorTheme">￥{{depositstats.transferInTotal}}万</span>
                            </li>
                            <li class="eachTitle">
                                免缴：
                                <span class="eachNum fontColorTheme">￥{{depositstats.exemptionAccountTotal}}万</span>
                            </li>
                            <li class="eachTitle">
                                动用：
                                <span class="eachNum fontColorTheme">￥{{depositstats.transferOutTotal}}万</span>
                            </li>
                            <li class="eachTitle">
                                返还：
                                <span class="eachNum fontColorTheme">￥{{depositstats.returnTotal}}万</span>
                            </li>
                            <li class="eachTitle">
                                余额：
                                <span class="eachNum fontColorTheme">￥{{depositstats.balance}}万</span>
                            </li>
                        </ul> -->
          <el-row style="width: 80%" class="fl">
            <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" class="eachTitle"
              >缴纳：
              <span class="eachNum fontColorTheme"
                >￥{{ depositstats.transferInTotal }}万</span
              ></el-col
            >
            <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" class="eachTitle"
              >免缴：
              <span class="eachNum fontColorTheme"
                >￥{{ depositstats.exemptionAccountTotal }}万</span
              ></el-col
            >
            <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" class="eachTitle"
              >动用：
              <span class="eachNum fontColorTheme"
                >￥{{ depositstats.transferOutTotal }}万</span
              ></el-col
            >
            <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" class="eachTitle"
              >返还：
              <span class="eachNum fontColorTheme"
                >￥{{ depositstats.returnTotal }}万</span
              ></el-col
            >
            <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" class="eachTitle"
              >余额：
              <span class="eachNum fontColorTheme"
                >￥{{ depositstats.balance }}万</span
              ></el-col
            >
          </el-row>
        </div>
        <div class="amountEach clearfix">
          <div class="amountTitle"><span></span>担保(生效中)</div>
          <el-row style="width: 80%" class="fl">
            <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" class="eachTitle"
              >{{ isXiangYangUser() ? '工程担保公司保函' : '业主担保' }}：
              <span class="eachNum fontColorTheme"
                >￥{{ depositstats.cgTotal }}万</span
              ></el-col
            >
            <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" class="eachTitle"
              >银行保函：
              <span class="eachNum fontColorTheme"
                >￥{{ depositstats.bgTotal }}万</span
              ></el-col
            >
            <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" class="eachTitle"
              >保险保单：
              <span class="eachNum fontColorTheme"
                >￥{{ depositstats.igTotal }}万</span
              ></el-col
            >
          </el-row>
          <!-- <ul class="clearfix">
                            <li class="eachTitle">
                                业主担保：
                                <span class="eachNum  fontColorTheme">￥{{depositstats.cgTotal}}万</span>
                            </li>
                            <li class="eachTitle">
                                银行保函：
                                <span class="eachNum fontColorTheme">￥{{depositstats.bgTotal}}万</span>
                            </li>
                            <li class="eachTitle">
                                银行保函：
                                <span class="eachNum fontColorTheme">￥{{depositstats.igTotal}}万</span>
                            </li>
                        </ul> -->
        </div>
      </el-row>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px" v-if="isShowAdd">
          <exportBtn
            :dataLen="tableList.length"
            :filterField="filterField"
            :api="exportApi"
            :responseType="responseType"
          ></exportBtn>
          <el-button
            :disabled="isDisabled"
            class="commonBut saveBtn funComBut bzjAddJc"
            icon="icon iconfont icontianjia"
            @click="addCashDeposit"
            v-show="isShowAdd"
          >
            <span class="opetareText">添加</span>
          </el-button>
        </div>
        <el-table
          ref="tableBox1"
          @sort-change="sortChange"
          border
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
          @header-dragend="handleDragend"
        >
          <el-table-column prop="projectName" label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaDetailDesc"
            label="区域"
            align="center"
            :formatter="formatTd"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="projectStatusDesc"
            label="项目状态"
            align="center"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column prop="companyName" label="缴纳单位" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="companyName" label="缴纳单位" align="center" :formatter="formatTd"></el-table-column> -->
          <el-table-column
            prop="payMethodDesc"
            label="缴纳形式"
            align="center"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="methodDesc"
            label="缴纳方式"
            align="center"
            min-width="120"
          >
            <template slot-scope="scope">{{
              scope.row.methodDesc ? scope.row.methodDesc : '--'
            }}</template>
          </el-table-column>
          <el-table-column
            prop="payTotal"
            label="缴纳时间及金额"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.operationDate ? scope.row.operationDate : '--' }}
              <br />
              ￥{{ scope.row.payTotal || 0 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="statusDesc"
            label="状态"
            align="center"
            :formatter="formatTd"
            min-width="110"
          ></el-table-column>
          <el-table-column
            prop="isExpenditureDesc"
            label="是否动用"
            align="center"
            :formatter="formatTd"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="balance"
            label="余额"
            align="center"
            min-width="120"
            sortable="custom"
          >
            <template slot-scope="scope"> ￥{{ scope.row.balance }} </template>
          </el-table-column>
          <el-table-column
            prop="returnDate"
            label="返还时间"
            sortable="custom"
            align="center"
            min-width="120"
            v-if="!isKMUser()"
          >
            <template slot-scope="scope">{{
              scope.row.returnDate ? scope.row.returnDate : '--'
            }}</template>
          </el-table-column>
          <el-table-column
            prop="endDate"
            label="正常退款时间及金额（万元）"
            sortable="custom"
            align="center"
            width="240"
            v-if="isKMUser()"
          >
            <template slot-scope="scope">
              {{ scope.row.endDate ? scope.row.endDate : '--' }}
              <br />
              ￥{{ scope.row.normalTotal || 0 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="returnDate"
            label="实际退款时间及金额（万元）"
            sortable="custom"
            align="center"
            width="240"
            v-if="isKMUser()"
          >
            <template slot-scope="scope">
              {{ scope.row.returnDate ? scope.row.returnDate : '--' }}
              <br />
              ￥{{ scope.row.returnTotal || 0 }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="220" fixed="right">
            <template slot-scope="scope">
              <div>
                <el-link
                  type="primary"
                  @click="showCashDepositDetail(scope.row)"
                  >查看详情</el-link
                >
                <el-link type="primary" @click="deitBond(scope.row)"
                  >修改</el-link
                >
                <el-link
                  v-if="isShowDel"
                  type="primary"
                  @click="toDelCashDeposit(scope.row)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <!-- </div> -->
    </div>
    <dialog-bond
      :shows="shows"
      :id="id"
      :itemInfo="itemInfo"
      @closeDialog="closeDialog"
      @successDialog="successDialog"
    />
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import 'driver.js/dist/driver.min.css' // import driver.js css
import DialogBond from './DialogBond.vue'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'cashDepositListJC',
  mixins: [scrollTable],
  components: { DialogBond },
  data() {
    return {
      isShow: false,
      titleText: '保证金列表',
      advanced: false,
      // btnText: "保证金设置",
      isShowBtn: false,
      pathUrl: '/home/cashDeposit/setCashDeposit',
      //表格数据
      tableList: [],
      requestUrl: 'api-d/deposit/expand/list',
      time: [],
      areaId: '',
      //搜索条件
      filterField: {
        areaId: '',
        method: '',
        status: '',
        isExpenditure: '',
        companyName: '',
        projectName: '',
        operationStartTime: '',
        payMethod: '',
        operationEndTime: '',
        serverArea: '', // 服务部署区域
        projectStatus: '',
      },
      pageSize: 20,
      pageNo: 1,
      areaList: [],
      isExpenditureData: [
        {
          id: '1',
          name: '是',
        },
        {
          id: '0',
          name: '否',
        },
      ],
      methodList: [],
      statusList: [],
      payMethodDescList: [],
      loading: true,
      depositstats: '', //统计数据
      areaName: '',
      isShowAdd: '',
      isShowDel: '',
      userType: '', //判断用户类型
      driver: null,
      isDisabled: false, //有引导页禁止点击

      id: '',
      shows: false,
      depositId: '',
      exportApi: 'api-s/report/export_JC_CS_SALARY_DEPOSIT',
      responseType: '',
    }
  },
  computed: {
    ...mapState(['statusOptions']),
    payList: function () {
      const vm = this
      if (vm.payMethodDescList) {
        let users = vm.payMethodDescList
        return users
      }
    },
  },
  mounted() {
    if (
      this.$route.query.operationStartTime &&
      this.$route.query.operationEndTime
    ) {
      this.time = [
        this.$route.query.operationStartTime,
        this.$route.query.operationEndTime,
      ]
      this.filterField.operationStartTime = this.$route.query.operationStartTime
      this.filterField.operationEndTime = this.$route.query.operationEndTime
      this.$refs.pagination.getTableListData()
    } else if (this.$route.query.alertId) {
      this.areaId = this.$route.query.alertId
      this.filterField.areaId = this.$route.query.alertId
      this.$refs.pagination.getTableListData()
    }
    this.$nextTick(function () {
      this.$refs.tableBox1.doLayout()
    })
  },
  created() {
    if (this.$route.query.projectName) {
      this.filterField.projectName = this.$route.query.projectName
    }
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getAreaList()
    this.getFindpaymethod()
    this.getMethodList()
    this.getStatusList()
    this.getDepositstats()
    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
    this.isShowBtn =
      this.$store.state.buttonLimitsArr.indexOf('depositSet:detail') > -1
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('mDepositList:add') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('mDepositList:delete') > -1
    if (this.isKMUser()) {
      this.exportApi = 'api-s/report/export_JC_CS_SALARY_DEPOSIT_KM'
      this.responseType = 'get'
    }
  },
  // 引导页面
  beforeRouteEnter(to, from, next) {
    if (localStorage.getItem('isFirstUseCashDepositJC') == 'true') {
      next()
    } else {
      next('/home/cashDeposit/cashDepositExplain')
    }
  },

  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    closeDialog() {
      this.shows = false
      this.id = ''
      this.itemInfo = {}
    },
    successDialog() {
      this.shows = false
      this.id = ''
      this.itemInfo = {}
      this.searchList()
    },
    deitBond(item) {
      console.log(item)
      if (
        item.method == 'FUNDDEPOSIT' &&
        ['ALL_PAY', 'PART_PAY'].includes(item.payMethod)
      ) {
        this.axios
          .post('api-d/accass/expand/findByProjectId', {
            projectId: item.projectId,
          })
          .then((res) => {
            if (!res.data.hasError) {
              if (res.data.result) {
                this.shows = true
                this.id = item.id
                this.itemInfo = item
              } else {
                this.$message({
                  message: '当前列没有缴纳流水记录',
                  type: 'warning',
                })
              }
            }
          })
      } else {
        this.shows = true
        this.id = item.id
        this.itemInfo = item
      }
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.operationStartTime = val
      } else {
        this.filterField.operationStartTime = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.operationEndTime = val
      } else {
        this.filterField.operationEndTime = ''
      }
    },
    skip() {
      this.$router.push({
        name: 'setCashDeposit',
        path: this.pathUrl,
        query: {
          paramsType: 'setCashDeposit',
        },
      })
      this.$store.state.activeMenu = this.pathUrl
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: this.oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
      // 获取统计数据
      if (this.filterField.areaId) {
        this.areaName = this.$refs.regAreas
          .getCheckedNodes()[0]
          .pathLabels.join('')
      }

      this.getDepositstats()
    },
    handleChange(item) {
      var areaId = this.areaId[this.areaId.length - 1]

      this.filterField.areaId = areaId
    },
    getAreaList() {
      this.axios({
        method: 'post',
        data: {
          areaId: this.$store.state.areaInfoArr.areaId,
        },
        url: 'api-bs/areadic/base/detailbyareaid',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.areaList = response.data.result
              this.areaName = this.areaList[0].label
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getFindpaymethod() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/findpaymethod',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.payMethodDescList = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getMethodList() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/method',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.methodList = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getStatusList() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/status',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.statusList = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getDepositstats() {
      this.axios({
        method: 'post',
        url: 'api-d/stats/expand/findtodaystats',
        data: { areaId: this.filterField.areaId },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.depositstats = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    toDelCashDeposit(row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delCashDeposit(row)
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        })
    },
    delCashDeposit(row) {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/delete',
        data: {
          projectId: row.projectId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    showCashDepositDetail(row) {
      this.$router.push({
        path: '/home/cashDeposit/cashDepositJcDetail',
        name: 'cashDepositJcDetail',
        query: {
          projectId: row.projectId,
          depositId: row.id, //后台返回的保证金id
          method: row.method, //根据缴纳方式和缴纳形式确定页面样式
          payMethod: row.payMethod,
          statusDesc: row.approvalStatusDesc,
          projectName: row.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositListJC',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    addCashDeposit() {
      this.$router.push('/home/cashDeposit/cashDepositAddJc')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositListJC',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.areaName {
  font-size: 18px;
  color: #333333;
  margin-bottom: 10px;
  .explain {
    font-size: 14px;
    color: #999999;
  }
}

.amountView {
  padding: 24px;
  background: #f5f7fb;
  margin: 0 24px;
  .amountEach {
    padding: 10px 0;
    ul {
      width: 80%;
      float: left;
    }
    .amountTitle {
      font-size: 16px;
      color: #333333;
      width: 15%;
      float: left;
    }
    .eachTitle {
      //   width: 20%;
      float: left;
      font-size: 16px;
      color: #999999;
      .eachNum {
        font-size: 18px;
        color: #009588;
        font-weight: 550;
        // margin-right: 88px;
      }
    }
  }
}
@media all and (min-width: 1360px) and (max-width: 1470px) {
  .el-form--inline .el-form-item {
    margin-right: 0;
  }
  .buttonList {
    margin-left: 25px;
  }
}

// @media only screen and (min-width: 1680px) {
//     .amountView .amountEach .amountTitle {
//             width: 8%;
//         }
// }

//引导页添加禁用样式
.bzjAddJc.el-button.is-disabled {
  color: #fff;
  background-color: #009588;
  border-color: #009588;
}
@import '../../../static/css/filterArea.less';
</style>
